import * as React from "react";
import Toolbar from "@mui/material/Toolbar";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Outlet,
  useRoutes,
  useNavigate,
} from "react-router-dom";

interface HeaderProps {
  title: string;
  list: { title: string; router: string,id:string }[];
}

export default function MenuLayout(props: HeaderProps) {
  const navigate = useNavigate();
  return (
    <React.Fragment>
      <Toolbar sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Button size="small">Subscribe</Button>
        <Typography
          component="h2"
          variant="h5"
          color="inherit"
          align="center"
          noWrap
          sx={{ flex: 1 }}
        >
          {props.title}
        </Typography>
        <IconButton>
          <SearchIcon />
        </IconButton>
        <Button variant="outlined" size="small">
          Sign up
        </Button>
      </Toolbar>
      <Toolbar
        component="nav"
        variant="dense"
        sx={{ justifyContent: "left", overflowX: "auto" }}
      >
        {
        props.list.map((item) => (
          <Link
          color="inherit"
          noWrap
          key={item.title}
          variant="body2"
          sx={{ p: 1, flexShrink: 0 }}
            onClick={() => {
              console.log("click "+{item})
              navigate(`/BlogList/${item.id}`);
            }}
          >
            {item.title}
          </Link>
        ))}
      </Toolbar>
    </React.Fragment>
  );
}
